<template>
<div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
</el-breadcrumb>

<el-card class="box-card">

<el-table
    :data="rightsList"
    stripe
    style="width: 100%">

    <el-table-column
      prop="id"
      label="权限ID"
      width="180">
    </el-table-column>

    <el-table-column
      prop="authName"
      label="权限说明"
      width="180">
    </el-table-column>

      <el-table-column
      prop="pid"
      label="权限父ID">
    </el-table-column>

      <el-table-column
      prop="level"
      label="权限层级">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.level==='0'">レベル1</el-tag>
        <el-tag type="success" v-if="scope.row.level==='1'">二级</el-tag>
        <el-tag type="warning" v-if="scope.row.level==='2'">三级</el-tag>
        <el-tag type="danger" v-if="scope.row.level==='3'">四级</el-tag>
      </template>
    </el-table-column>

        <el-table-column
      prop="path"
      label="访问路径">
    </el-table-column>
    
  </el-table>

</el-card>

</div>
</template>

<script>
export default {
    data(){
        return {rightsList:[]}
    },

    created(){
    this.getRightsList('list');   
    },

    methods:{
    async getRightsList(type){  
       const {data:res}=await this.$http.get(`rights/${type}`)
       this.rightsList=res.data;
       console.log(this.rightsList);
    },
}
}
</script>

<style lang="less" scoped>
   
</style>